<template>
  <div class="share-start-page-view" :style="pageBg">
    <div class="head">
      <img :src="musicIcon" class="music" @click="changeMusicPlay">
      <img :src="ruleBg" class="rule" @click="visible=true">
    </div>

    <div class="user-head">
      <div class="user-head-wrap" :style="headbg">
        <img :src="head">
      </div>
    </div>

    <div class="share-result">
      <p class="one">
        <span>我抓到了</span>
        <i v-for="item in animalNum" :style="numbg" class="num">{{item}}</i>
        只年兽
      </p>
      <p class="two">
        <span class="two-1">敢不敢</span>
        <span>来</span>
        <span class="two-2">挑战我</span>
        <i>?</i>
      </p>
    </div>
    <Hand :btnimg="startImg" @handClick="gogo" >
      <!-- <ShakeHand></ShakeHand> -->
    </Hand>
    <div class="coupon-btn" v-show="$store.state.coupon!=''">
      <span @click="openMar">我的兑换码</span>
    </div>
    <div class="logo">
      <img :src="hzImg"> 
    </div>
    <img :src="animal" class="animal animated bounceInLeft">

    <Dialog :visible.sync="visible">
      <div slot="content" >
        <rule @close="visible=false"></rule>
      </div>   
    </Dialog>
    <Dialog :visible.sync="visible1">
      <div slot="content" >
        <got-award @close="visible1=false"></got-award>
      </div>   
    </Dialog>
  </div>
</template>
<script>
import Utils from './../utils.js'
import Hand from './../components/hand.vue'
import Dialog from './../components/dialog.vue'
import Rule from './../components/rule.vue'
import GotAward from './../components/got-award.vue'
import { Toast } from 'mint-ui'

export default {
  name: "ShareStart",
  components:{
    Dialog,
    Hand,
    Rule,
    GotAward
    
  },
  data () {
    return {
      pageBg:{
        'background-image': `url(${require('./../assets/imgs/share/bg.jpg')})`
      },
      ruleBg:require('./../assets/imgs/icon-rlue.png'),
      hzImg:require('./../assets/imgs/hz-bank-logo.png'),
      startImg:require('./../assets/imgs/share/img_02.png'),
      headbg:{
        'background-image': `url(${require('./../assets/imgs/share/img_05.png')})`
      },
      head:require('./../assets/imgs/sbWay/img_06.png'),
      numbg:{
        'background-image': `url(${require('./../assets/imgs/share/img_03.png')})`
      },
      animal:require('./../assets/imgs/share/img_06.png'),
      animals:66,
      visible:false,
      visible1:false
    };
  },
  computed:{
    isPlay(){
      return this.$store.state.isPlaying
    },
    musicIcon(){
      return this.isPlay ? Utils.imgs.musicPlay : Utils.imgs.musicPause
    },
    animalNum(){
      return  String(this.animals).split('')
    }
  },
  mounted(){
    //必然存在showId  
    let vm = this
    let openId = this.$route.query.showId 
    this.$store.dispatch('getShowerInfo',{
      params:{openId}
    }).then(data=>{
      if(data){
        console.log(data)
        this.head= data.img
        this.animals = data.score
      }
    })
    this.$store.dispatch('getFriendsList').then(()=>{
      wx.ready(()=>{
        wx.onMenuShareTimeline(vm.$store.getters.wxShareData)
        wx.onMenuShareAppMessage(vm.$store.getters.wxShareData)
      }) 
    })
  },
  methods:{
    changeMusicPlay(){
      this.$store.commit('updateMusicStatus',!this.isPlay)
    },
    openMar(){
      this.visible1 = true
    },
    gogo(){
      let openId = this.$route.query.showId 
      if( new Date().valueOf() < new Date(timeConfig.start).valueOf() ){
        Toast('活动还没有开始，敬请期待~')
      }else if(new Date().valueOf() > new Date(timeConfig.end).valueOf()){
        Toast('活动已经结束啦~')
      }else{
        this.$router.push({
          path:'/game',
          query:{
            showId:openId
          }
        })
      }
      
    }
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common';
.share-start-page-view{
  overflow:hidden;
  width:100%;
  height: 100%;
  @include bg-img();
  position: relative;
  .head{
    position: absolute;
    width: 100%;
    height: px2rem(80);
    text-align: center;
    .music{
      position: absolute;
      left:  px2rem(20);
      top:px2rem(20);
      width: px2rem(60);
      height: px2rem(60);
    }
    .rule{
      position: absolute;
      right:  px2rem(20);
      top:px2rem(20);
      height: px2rem(68);
      
    }
    
  }
  div.logo{
    position: absolute;
    bottom: 1%;
    padding-top: px2rem(8);
    width: 100%;
    text-align: center;
    img{
        // width: px2rem(44);
        height: px2rem(60);
    }
  }
  .user-head{
    padding-top: px2rem(100);
    text-align: center;
    .user-head-wrap{
      width: px2rem(344);
      height:px2rem(344) ;
      margin: 0 auto;
      @include bg-img();
      img{
        border-radius: 50%;
        width:86%;
        height: 86%;
        margin-top: px2rem(16);
      }
    }
  }
  .animal{
    position: absolute;
    bottom: px2rem(-155);
    left: px2rem(-108);
    width:px2rem(300);
  }
  .share-result{
    text-align: center;
    color: #ee5b47;
    font-weight: bold;
    letter-spacing: px2rem(2);
    font-size: px2rem(33);
    .one{
      // @include font-dpr(38px);
      font-size: px2rem(36);
      margin-bottom:  px2rem(-20);
      margin-top: px2rem(40);
      i.num{
        border-radius: 50%;
        display: inline-block;
        width: px2rem(91);
        height: px2rem(91);
        font-size: px2rem(52);
        @include bg-img();
        color: #fff;
        line-height:  px2rem(91);
        font-style: normal;
        text-align: center;
        text-indent: px2rem(6);
        margin-left: px2rem(-26);
        //box-shadow:px2rem(-8) px2rem(2) px2rem(2) rgba(21,21,21,.6);
        &:first-of-type{
          margin-left: px2rem(10);
        }
        
      }
    }
    .two{
      padding-top: px2rem(48);
      margin: 0;
      vertical-align: bottom;
      .two-1{
         font-size: px2rem(46);
         vertical-align: bottom;
      }
      .two-2{
         font-size: px2rem(54);
         vertical-align: bottom;
      }
      i{
        font-size: px2rem(54);
        margin-left: px2rem(-10);
        vertical-align: bottom;
      }
    }
  }
  .start-btn-wrap{
    margin-top: px2rem(30);
  }
  .coupon-btn{
    color: #fff;
    text-align: center;
    span{
      width:px2rem(180);
      height: px2rem(60);
      line-height: px2rem(60);
      font-size: px2rem(26);
      text-decoration: underline;
      display: inline-block;
      @include bg-img();
      background-image: url('./../assets/imgs/share/cupun.png');  
    }
  }
  // .hand-img{
  //   bottom:px2rem(220);
  // }
}
</style>